<!DOCTYPE html>
<html>
<head>
	<title>进度条</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		body{
			margin: 10px 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuenow="50%" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
				<span class="sr-only">60%</span>
			</div>
		</div>

		<!-- 带有提示框的进度条 -->
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
				60%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 2%">
				2%
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
				0%
			</div>
		</div>

		<div class="progress">
			<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
			</div>
		</div>

		<!-- progress-bar-striped:带纹理、条纹的进度条 -->
		<div class="progress">
			<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
				40%
			</div>
		</div>

<!-- 增加了active类就动起来了 -->
		<div class="progress">
			<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
				40%
			</div>
		</div>

<!-- 堆叠效果 -->
		<div class="progress">
			<div class="progress-bar" style="width: 30%"></div>
			<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 25%"></div>
		</div>
	</div>
</body>
</html>
